<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>青少年科学教育研究中心</title>
    <link rel="shortcuticon" href="./favicon.ico" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./plugins/jquery-3.6.0.min.js"></script>
  </head>

  <body>
    <div id="main">
      <div id="header">
        <!-- <div id="back">&lt</div> -->
        <!-- <div id="address">走进科学</div> -->
        <div id="address">走进科学</div>
        <!-- <div id="mypage"><img src="./images/我的.png" alt="" /></div> -->
      </div>
      <div id="content">
        <template>
          <div id="course_main">
            <div id="course_tag">
              <div id="tag_left">
                <img src="" alt="" />
              </div>
              <div id="tag_right">
                <div id="course_name">
                  <p id="title"></p>
                  <p id="intro"></p>
                </div>
                <div id="course_status">
                  <div id="row_star"></div>
                  <div id="arrows">
                    <!-- <img src="./images/下拉.png" alt="下拉" /> -->
                  </div>
                </div>
              </div>
            </div>
            <div id="slide_down">
              <div id="slide_left">
                <!-- <div id="left_bg"></div> -->
              </div>
              <div id="slide_right">
                <div class="process" id="list_1">
                  <img src="./images/故事引入.png" alt="" />
                  <p>故事引入</p>
                  <div id="gsyr"></div>
                </div>
                <div class="process" id="list_2">
                  <img src="./images/原理讲解.png" alt="" />
                  <p>原理讲解</p>
                  <div id="yljj"></div>
                </div>
                <div class="process" id="list_3">
                  <img src="./images/动手实验.png" alt="" />
                  <p>动手实验</p>
                  <div id="dssy"></div>
                </div>
                <div class="process" id="list_4">
                  <img src="./images/课程报告.png" alt="" />
                  <p>课程报告</p>
                  <div id="kcbg"></div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div id="shelter"></div>
      </div>
      <!-- <div id="shelter"></div> -->
      <div id="footer">
        <div id="my_course">
          <!-- <img src="./images/我的课程.png" alt="" /> -->
          <div class="icon"></div>
          <p>我的课程</p>
        </div>
        <div id="study_report">
          <!-- <img src="./images/报告.png" alt="" /> -->
          <div class="icon"></div>
          <p>学习报告</p>
        </div>
      </div>
    </div>
  </body>
  <script type="module">
    import { handleLocalStorage } from './js/localstorage.js';
    import { setCurrentCourseStatus } from './js/modify_course_status.js';

    $(function () {
      let DESIGN_WIDTH = 750;
      let DESIGN_HEIGHT = 1334;
      // 获取当前设备的屏幕的宽度和高度
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;

      // 获取课程信息数据的接口参数
      var getCourseInfoParam = {
        UserId: 1,
      };

      // 设置rem大小
      let html = $('html');
      html.css({
        'font-size': (width * 12) / DESIGN_WIDTH,
      });

      // 获取跟容器
      let mainbox = $('#main');
      mainbox.width(width);
      // mainbox.height((width * DESIGN_HEIGHT) / DESIGN_WIDTH);
      mainbox.height(height);
      // 获取header
      let headerBox = $('#header');
      headerBox.css('height', (height * 100) / DESIGN_HEIGHT);
      headerBox.children('#back').css({
        height: headerBox.height(),
        width: headerBox.height(),
        'line-height': headerBox.height() + 'px',
        'text-align': 'center',
      });
      headerBox.children('#back').on('click', function (e) {
        e.stopPropagation();
        location.reload();
      });
      headerBox.children('#address').css({
        'line-height': headerBox.height() + 'px',
      });
      headerBox.children('#mypage').css({
        height: headerBox.height(),
        width: headerBox.height(),
        'line-height': headerBox.height() + 'px',
      });
      headerBox.children('#mypage').on('click', function (e) {
        e.stopPropagation();
        location.href = '';
      });
      // 获取footer
      let footerBox = $('#footer');
      footerBox.css('height', (height * 100) / DESIGN_HEIGHT);
      footerBox.children('#my_course').on('click', function (e) {
        e.stopPropagation();
        // location.href = "";
      });
      footerBox.children('#study_report').on('click', function (e) {
        e.stopPropagation();
        location.href = './view/study_report.html';
      });
      // 获取content的DOM元素
      let contentBox = $('#content');
      contentBox.height(height - (headerBox.height() + footerBox.height()));
      // 获取和设置遮罩
      let shelter = $('#shelter');
      shelter.css({
        width: width,
        height: contentBox.height(),
        top: headerBox.height(),
      });
      shelter.on('click', function (event) {
        let _this = this;

        // 让所有下拉的列表全部折叠上去
        let slide_down = document.querySelectorAll('#slide_down');
        for (let i = 0; i < slide_down.length; i++) {
          const element = slide_down[i];
          let _element = $(element);
          if (_element.css('display') == 'block') {
            _element.slideUp('slow', () => {
              $(_this).hide();
            });
            break;
          }
        }

        // 将所有的箭头的方向改为点击下拉的样式
        let arrows = document.querySelectorAll('#arrows');
        for (let i = 0; i < arrows.length; i++) {
          const element = arrows[i];
          var _element = $(element);
          _element.css({
            'background-image': "url('./images/下拉.png')",
          });
          _element.prop('isDown', true);
        }
      });
      shelter.hide();

      // let course_data;
      $.ajax({
        type: 'get',
        // url: './data/course_tag.json',
        url: 'http://39.101.150.56:8080/getCourseInfoByUserID',
        data: getCourseInfoParam,
        async: true,
        success: function (data) {
          handleLocalStorage(
            'set',
            'currentCourseStatus',
            JSON.stringify(data.data)
          );
          // ------课程标签模板部分-----
          var courseTemplate = document.getElementsByTagName('template')[0];
          // for (let i = 0; i < data.length; i++) {
          for (let i = 0; i < data.data.length; i++) {
            var _data = data.data[i];
            var course_main =
              courseTemplate.content.querySelector('#course_main');
            var _course_main = $(document.importNode(course_main, false));
            // 模板总外框的样式设置
            var course_tag =
              courseTemplate.content.querySelector('#course_tag');
            var newcourse_tag = document.importNode(course_tag, true);
            var _new_course_tag = $(newcourse_tag);
            _new_course_tag.attr('data-index', i);
            _new_course_tag.on('click', function (e) {
              // _this是当前的_new_course_tag 的DOM对象
              let _this = $(this);
              // arrow 是我们之后需要操作的箭头
              var arrow = _this
                .children('#tag_right')
                .children('#course_status')
                .children('#arrows');
              // data_index获取当前被点击的课程标签的索引号。
              var data_index = parseInt(_this[0].dataset.index);
              // 获取所的下拉部分 组成数组。
              let slide_down = document.querySelectorAll('#slide_down');
              // 获取所有的课程标签
              let courseTag = document.querySelectorAll('#course_tag');
              // 通过循环遍历的方式，初始的时候让所有的课程标签的z-index的值为0
              for (let i = 0; i < courseTag.length; i++) {
                const element = courseTag[i];
                var _element = $(element);
                _element.css({
                  'z-index': 0,
                });
              }
              // 对所有的课程标签的下拉列表进行遍历，
              for (let i = 0; i < slide_down.length; i++) {
                const element = slide_down[i];
                // _element是当前正在被遍历的下拉列表部分。
                var _element = $(element);
                // 如果点击的课程标签的index等于当前遍历的下拉部分的index，进一步的判断，下拉箭头的状态。
                if (data_index == parseInt(_element.attr('data-index'))) {
                  if (
                    arrow.prop('isDown') ||
                    arrow.prop('isDown') == undefined
                  ) {
                    // 当前箭头是向下的。
                    arrow.css({
                      'background-image': "url('./images/上翻.png')",
                    });
                    arrow.prop('isDown', false);
                    _element.slideDown('slow');
                    $(courseTag[i]).css('z-index', 2);
                    $(slide_down[i]).css('z-index', 2);
                    shelter.show();
                  } else {
                    _element.slideUp('slow');
                    arrow.css({
                      'background-image': "url('./images/下拉.png')",
                    });
                    arrow.prop('isDown', true);
                    shelter.hide();
                  }
                } else {
                  _element.slideUp('slow');
                }
              }
            });

            // -------------tag_left--------------
            var _tag_left = _new_course_tag.children('#tag_left');
            _tag_left.children('img').attr('src', _data.course_image);

            // -------------tag_right------------------
            var _tag_right = _new_course_tag.children('#tag_right');
            var _course_name = _tag_right.children('#course_name');
            _course_name.children('#title').text(_data.course_name);
            _course_name.children('#intro').text(_data.course_intro);
            var _course_status = _tag_right.children('#course_status');
            _course_status.children('#arrows').attr('data-index', i);

            var count_star = 0;
            //检测星星数量，点击
            var finish_status = _data.finish_status;
            // 动态的添加星星
            for (let key in finish_status) {
              if (finish_status[key]) {
                var imgStr = './images/紫色星星.png';
                var img = $('<img src=' + imgStr + " alt='' />");
                _course_status.children('#row_star').append(img);
                count_star++;
              } else {
                var imgStr = './images/空心星星.png';
                var img = $('<img src=' + imgStr + " alt='' />");
                _course_status.children('#row_star').append(img);
              }
            }
            // course_tag模板中的所有内容设置完毕。将importNode的newcourse_tag添加到父级
            _course_main.append(newcourse_tag);

            // -----------------slide_down ----------------
            // 各个实验的下拉面板内容
            var slide_down = document.importNode(
              courseTemplate.content.querySelector('#slide_down'),
              true
              // true表示同时导入 id为slide_down下面的所有元素
            );
            var _slide_down = $(slide_down);
            _slide_down.attr('data-index', i);
            _slide_down.hide();
            // left of slide_down
            var slide_left = _slide_down.children('#slide_left');
            for (let key in finish_status) {
              if (finish_status[key]) {
                var imgStr = './images/紫色星星.png';
                var img = $('<img src=' + imgStr + " alt='' />");
                slide_left.append(img);
              } else {
                var imgStr = './images/空心星星.png';
                var img = $('<img src=' + imgStr + " alt='' />");
                slide_left.append(img);
              }
            }

            // right of slide_down
            var slide_right = _slide_down.children('#slide_right');
            var process = slide_right.children('.process');
            for (let i = 0; i < 4; i++) {
              let element = process[i];
              let _element = $(element);
              _element.attr('data-link', _data.process_link[i]);
              _element.on('click', function (event) {
                event.stopPropagation();
                if (event.target.dataset.link == undefined) {
                  let hrefaddr = event.target.parentNode.dataset.link;
                  location.href = hrefaddr;
                } else {
                  location.href = event.target.dataset.link;
                }
              });
            }
            // 锁和不可点击
            var yljj_lock = _data.second_lock;
            var dssy_lock = _data.third_lock;
            var kcbg_lock = _data.fourth_lock;

            if (yljj_lock) {
              var imgStr = './images/锁.png';
              var img = $('<img src=' + imgStr + " alt='' />");
              process.children('#yljj').append(img);
              slide_right.children('#list_2').addClass('notclick');
            }
            if (dssy_lock) {
              var imgStr = './images/锁.png';
              var img = $('<img src=' + imgStr + " alt='' />");
              process.children('#dssy').append(img);
              slide_right.children('#list_3').addClass('notclick');
            }
            if (kcbg_lock) {
              var imgStr = './images/锁.png';
              var img = $('<img src=' + imgStr + " alt='' />");
              process.children('#kcbg').append(img);
              slide_right.children('#list_4').addClass('notclick');
            }
            _course_main.append(slide_down);

            // 将整个面板添加进去
            contentBox.append(_course_main);
          }
          // ----- 课程标签模板结束 -----
        },
      });

      window.addEventListener('resize', function name(e) {
        location.reload();
      });
    });
  </script>
</html>
